<style lang="scss">
    .edit{
        height: 100vh;
        background-color: #f5f5f5;
        .head{
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
            span{
                color: cornflowerblue;
            }
        }
        .message{
            width: 94%;
            box-sizing: border-box;
            padding: 5px 2%;
            height: 60vh;
            border-radius: 7px;
            background-color: #fff;
            margin-left: 3%;
            .title{
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
            }
            .list{
                min-height: 40px;
                line-height: 40px;
                display: flex;
                padding: 0 2%;
                border-bottom: 1px solid #f5f5f5;
                color: #999;
                font-size: 15px;
                .label{
                    width: 20%;
                }
                .detail{
                    width: 80%;
                    text-align: right;
                    position: relative;
                    textarea{
                        width: 80%;
                        height: 150px;
                        margin-right: 5px;
                        margin-top: 5px;
                        border: 1px solid #999;
                        border-radius: 7px;
                        line-height: 22px;
                        padding: 5px;
                    }
                    .numLength{
                        position: absolute;
                        right: 13px;
                        bottom: 10px;
                    }
                }
            }
        }
    }
    .content{
        padding: 0 5%;
        height: 150px;
    }
</style>
<template>
    <div class="edit">
        <p-navigator 
            :text="'修改资料'"
            isBtn
            @click="submit"/>
        <div class="head">
            <img :src="userInfo.headImg" alt="">
            <span @click="editUpload()">
                修改头像
            </span>
        </div>
        <div class="message">
            <div class="title">
                常规
            </div>
            <div class="list">
                <div class="label">
                    昵称
                </div>
                <div class="detail" @click="nickShow = true">
                    <span>
                        {{ userInfo.nickName }}
                    </span>
                    
                </div>
            </div>
            <div class="list">
                <div class="label">
                    性别
                </div>
                <div class="detail" @click="sexShow = true">
                    <span>
                        {{ userInfo.sex == 0 ? '女' : userInfo.sex == 1 ? '男' :'保密' }}
                    </span>
                </div>
            </div>
            
            <div class="list">
                <div class="label">
                    个人简介
                </div>
                <div class="detail">
                    <textarea v-model="userInfo.desction">

                    </textarea>
                    <span class="numLength">
                        {{userInfo.desction.length}}/150
                    </span>
                </div>
            </div>
        </div>
        <van-action-sheet v-model="nickShow" title="修改昵称">
            <div class="content">
                <van-cell-group>
                    <van-field v-model="userInfo.nickName" label="昵称" placeholder="请输入要修改的昵称" />
                </van-cell-group>
            </div>
        </van-action-sheet>
        <van-action-sheet v-model="sexShow" title="修改性别">
            <div class="content">
                <van-radio-group v-model="userInfo.sex" direction="horizontal">
                    <van-radio :name="1">男</van-radio>
                    <van-radio :name="0">女</van-radio>
                    <van-radio :name="null">保密</van-radio>
                </van-radio-group>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
// 导入 接口
import {
    upload,
    editUserInfo,
    getUserInfo
} from '@/api'
export default {
    methods: {
        editUpload(){
            // 提前定义一个this指向变量
            let _this = this;
            // 创建input元素
            let input = document.createElement('input');
            // 改变input的type值位file
            input.type = 'file';
            // 主动触发点击事件
            input.click();
            // 监听input元素 改变事件
            input.onchange = function (){
                // 选择的文件对象
                let file = this.files[0];
                // 模拟表单对象
                let formData = new FormData();
                // 添加参数
                formData.append('file',file);
                // 上传文件
                upload(formData).then(res => {
                    // 后端响应数据 判断是否成功
                    if(res.data.code == 1){
                        _this.userInfo.headImg = res.data.result
                    }
                })
            }
        },
        submit(){
            // 直接调用修改资料接口
            editUserInfo(this.userInfo).then(res => {
                // 保存成功
                if(res.data.code == 1){
                    getUserInfo().then(res => {
                        // 弹出vant提示
                        this.$toast('修改成功');
                        // 保存信息
                        localStorage.setItem('userInfo',JSON.stringify(res.data.result))
                    })
                }
            })
        }
    },
    // 监听
    watch: {
        'userInfo.desction'(n){
            // 取出新值的前150个字符
            this.userInfo.desction = n.substr(0,150);
        }
    },
    data() {
        return {
            // 修改昵称面板是否显示
            nickShow: false,
            // 修改性别面板是否显示
            sexShow: false,
            userInfo: this.$store.state.userInfo
        }
    },
    // 创建后
    created(){
        // JSON.parse
        // 当遇到了JSON格式的对象字符串时 
        // 需要先将字符串格式的对象转换成真正的对象
        // 才能够调用对象里面的数据
        // this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    }
}
</script>